<template>
    <div style="height:100%">
        <div class="com-container">
            <!-- 柱状图 -->
            <div ref="chartDom" class="com-chart"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'ItemLiquidFill',
})
// 圆环图
export default class ItemLiquidFill extends Vue {
    // @Prop() data;
    @Prop() color;
    @Prop() info: any;
    @Prop() title: string;
    chartInstance: any = null;
    detailShow: boolean = false;

    value: number = 0;
    percent: any = 0;
    percentValue: any = 0;

    @Watch('info', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            this.percentValue = this.info?.total ? this.info.successNum : 0;
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        let that = this;
        let initOption = {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            legend: {
                orient: 'vertical',
                icon: 'none',
                right: '10%',
                bottom: '15%',
                itemGap: 6,
                itemHeight: 8, // 修改icon图形大小
                itemWidth: 10,
                selectedMode: false,
                textStyle: {
                    fontSize: 16,
                    color: '#b2b7c2',
                },
            },
            series: [
                {
                    // value: 50, //  内容 配合formatter
                    type: 'liquidFill',
                    radius: '56%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
                    center: ['30%', '50%'],
                    waveAnimation: false, // 停止动画 动画占用cpu过高 核心代码
                    animationDuration: 0, // 停止动画 动画占用cpu过高 核心代码
                    animationDurationUpdate: 0, // 停止动画 动画占用cpu过高 核心代码
                    data: [
                        0,
                        {
                            value: 0,
                            direction: 'left', // 波浪方向
                        },
                    ], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: '#071330', //
                        // color: 'rgba(224,242,255,0)',
                    },
                    amplitude: '3%', // 波浪的振幅
                    // 修改波浪颜色
                    // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: this.color,
                                },
                                {
                                    offset: 0,
                                    color: this.color,
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    label: {
                        normal: {
                            formatter: function(params) {
                                const percent = (that.percent * 100).toFixed(2);
                                const label = (that.percentValue || 0) + '/' + (that.info?.total || 0);
                                return `{d|${percent}}` + '{d|%}\n' + `{c|${label}}`;
                            },
                            rich: {
                                d: {
                                    fontSize: 20,
                                },
                                c: {
                                    fontSize: 13,
                                    // top: 50,
                                },
                            },
                            textStyle: {
                                fontSize: 20,
                                backgroundColor: 'rgba(255, 255, 255, 0)',
                            },
                        },
                    },
                    outline: {
                        show: false,
                    },
                },
                {
                    type: 'pie',
                    z: 1,
                    center: ['30%', '50%'],
                    radius: ['58.5%', '60%'], // 控制外圈圆的粗细
                    hoverAnimation: false,
                    data: [
                        {
                            name: '',
                            value: 500,
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: '#fff',
                            },
                            emphasis: {
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    color: '#00AFFF',
                                },
                            },
                        },
                    ],
                },
            ],
            graphic: [
                {
                    type: 'text',
                    top: '20%',
                    left: '58%',
                    style: {
                        text: '总数',
                        fill: '#c7ac78',
                        fontSize: 14,
                        fontFamily: 'Source Han Sans-FVS Normal',
                    },
                },
                {
                    type: 'text',
                    top: '32%',
                    left: '58%',
                    style: {
                        text: this.info.total || 0,
                        fill: '#c97842',
                        fontSize: 15,
                        fontFamily: 'PangMenZhengDao',
                        color: 'rgba(251, 146, 70, 0.5)',
                        fontWeight: 'bold',
                    },
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }

    updateChart(e) {
        if (this.info.total && this.info.successNum) {
            this.percent = (this.info.successNum / this.info.total).toFixed(4);
        } else {
            this.percent = 0.0;
        }
        const dataOption = {
            series: [{ data: [this.percent || 0] }],
            graphic: [{}, { style: { text: this.info.total || 0 } }],
        };
        this.chartInstance.setOption(dataOption);
    }

    // 刷新
    refresh() {
        this.$emit('refresh', this.title);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    beforeDestroy() {
        this.chartInstance.clear();
        this.chartInstance.dispose();
        this.chartInstance = null;
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
